<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;">
      <h5 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif">订单列表</h5>
    </el-header>
    <el-main style="background-color: #fff;">
      <el-dialog title="订单发货" :visible.sync="dialogFormVisible">
        <el-form :model="form" ref="form">
          <el-form-item label="快递单号" :label-width="formLabelWidth">
            <el-input v-model="form.CourierNumber" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="快递公司" :label-width="formLabelWidth" prop="CourierCompany">
            <el-select v-model="form.CourierCompany" placeholder="请选择快递公司">
              <el-option label="顺丰" value="顺丰"></el-option>
              <el-option label="中通" value="中通"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="fahuo">确认发货</el-button>

        </div>
      </el-dialog>
      <el-table
        ref="multipleTable"
        :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column align="center"
                         label="订单编号"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.order_id }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="收货人"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.user_nickname }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="交易时间"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.order_place_time}}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="付款时间"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.order_pay_time }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="发货时间"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.order_deliver_time }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="完成时间"
                         width="100">
          <template slot-scope="scope">
            {{ scope.row.order_receive_time }}
          </template>
        </el-table-column>
        <el-table-column align="center"
                         label="状态"
                         width="100">
          <template slot-scope="scope">
            <el-tag :type="toggleButtonChange(scope.row.order_state).StateColor">
              {{scope.row.order_state}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column  align="center" fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="info"
              @click="delivery(scope.$index, scope.row)">发货</el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">查看</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page='currentPage'
        :page-sizes="[10, 20, 50, 100]"
        :page-size='pageSize'
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length">
      </el-pagination>
    </el-main>
  </el-container>
</template>

<script>
  import buttons from '../zys/buttons'//引入按钮组件
  import searchbox from '../ZF/searchbox'
  export default {
    name: "orderList",
    components: {
      searchbox,
      buttons,
    },

    //表格数据的操作方法
    data() {
      return {
        // table数据传入
        list: [],
        currentPage: 1,
        pageSize: 10,
        pageIndex: 1,
        dialogFormVisible: false,

        form: {
          CourierNumber: '',
          CourierCompany: '',
          orderid:''
        },
        formLabelWidth: '110px',

      }
    },

    methods: {
      toggleButtonChange (param) {
        if (param === '待付款') {
          return {
            string: '待付款',
            color: 'warning',
            StateColor: 'warning'
          }
        } else if (param === '待收货') {
          return {
            string: '待收货',
            color: 'danger',
            StateColor: 'danger'
          }
        }else {
          return {
            string: '已完成',
            color: 'success',
            StateColor: 'success'
          }
        }
      },
      handleSizeChange(val) {
        this.pageSize = val
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      // 选中行
      handleSelectionChange(val) {
        console.log('val:', val)
      },
      fahuo(){
        this.dialogFormVisible = false;
        this.$axiosx.get('/api/backAddData',{params:this.form})
          .then((response) => {
            console.log(this.form);
            console.log('1111');
          });

      },

      //发货
      delivery(index,row){
        console.log(this)
        console.log(' index:', index)
        console.log(' row:', row)
        this.dialogFormVisible=true;
        this.form.orderid=index+1;


      },
      // 查看
      handleEdit(index, row) {
        console.log(' index:', index)
        console.log(' row:', row)
      },
      // 删除
      handleDel(index, row) {
        console.log(' index:', index)
        console.log(' row:', row)
      }
    },
    created(){
      this.$axiosx.get('/api/backGetorderlist')
        .then((response) => {
          console.log('1111');

          this.list = response.data;
          for(let i=0;i<(this.list).length;i++){
            // console.log((this.list[i]).order_pay_time);
            if(((this.list[i]).order_pay_time==null)&&((this.list[i]).order_deliver_time==null)){
              (this.list[i]).order_state='待付款'
            }else if((this.list[i]).order_deliver_time!=null){
              (this.list[i]).order_state='待收货'
            }else {
              (this.list[i]).order_state='已完成'
            }
          }
          console.log(response.data);

        });
    },

  }

</script>

<style scoped>
  .el-pagination{
    float: right;
  }
</style>
